<template>
  <IFlexHeaderMain>
    <template #header>
      <ISeniorSearch :seniorSearchOption="seniorSearchOption" @clickSeniorFun="clickSeniorFun"></ISeniorSearch>
    </template>
    <IVxeTable :tableData="tableData" ref="ivxetableRef" @vxeTableSearchFun="searchFun">
      <template #address_template="{ obj }">我是谁 {{ obj.address }}</template>
      <template #expand_tempalte="{ obj }">我是展开{{ obj }}</template>
    </IVxeTable>
  </IFlexHeaderMain>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { IFlexHeaderMain, IVxeTable, ISeniorSearch } from 'wb-platform-library'
  import { SeniorSearchInterFace } from 'wb-platform-library/lib/dist/packages/components/ISeniorSearch/src/ISeniorSearch'
  import { TableDataInterFace } from 'wb-platform-library/lib/dist/packages/components/IVxeTable/src/IVxeTable'
  const ivxetableRef = ref()
  const tableData = ref<TableDataInterFace>({
    type: '123',
    columns: [
      {
        field: 'name',
        width: 120,
        title: 'Name',
        sortable: true,
        isCheck: false,
        drop: true,
        searchFilter: { type: 'input', placeholder: '请输入123' },
      },
      { field: 'sex', title: 'Sex', drop: true, searchFilter: { type: 'input', placeholder: '请输入123' }, width: 120, fixed: 'left' },
      { field: 'age', title: 'Age', drop: true, searchFilter: { type: 'input', placeholder: '请输入123' }, width: 120 },
      { field: 'address', title: '地址', template: 'address_template', drop: true, searchFilter: { type: 'input' }, width: 120 },
      { field: 'time', title: '时间', template: 'time_template', drop: true, searchFilter: { type: 'datetime' }, width: 120 },
      {
        field: 'rangePicker',
        title: 'rangePicker时间',
        template: 'time_template',
        width: 120,
        drop: true,
        searchFilter: { type: 'datetime', placeholder: '请输入123' },
      },
      {
        field: 'addressselect',
        title: '地址select',
        drop: true,
        searchFilter: {
          type: 'select',
          dataList: [
            { label: 1, value: 1 },
            { label: 2, value: 2 },
            { label: 3, value: 3 },
          ],
        },
        width: 120,
      },
      { field: 'address3', title: '地址3', drop: true, searchFilter: { type: 'input' }, width: 120 },
      { field: 'address4', title: '地址4', drop: true, searchFilter: { type: 'input' }, width: 120 },
      { field: 'address5', title: '地址5', drop: true, searchFilter: { type: 'input' }, width: 120 },
      { field: 'address6', title: '地址6', drop: true, searchFilter: { type: 'input' }, width: 120 },
      { field: 'address7', title: '地址7', drop: true, searchFilter: { type: 'input' }, width: 120 },
      { field: 'address8', title: '地址8', drop: true, searchFilter: { type: 'input' }, width: 120 },
      { field: 'address9', title: '地址9', drop: true, searchFilter: { type: 'input' }, width: 120 },
    ],
    authControl: {
      printFun: async (a, b) => console.log('我是打印', a, b),
      toolbarCustomeFun: async (a, b) => console.log('自定义字段选择', a, b),
      checkBoxFun: async (a, b) => console.log('复选框选择', a, b),
      radioFun: async (a, b) => console.log('单选框', a, b),
      fieldSortFun: async (a, b) => console.log('排序', a, b),
      isExpandFun: async (a, b) => console.log('展开方法', a, b),
      columnDropFun: async (a, b) => console.log('拖动方法', a, b),
    },
    rowspanList: ['age'],
    data: [],
    operation: {
      label: '操作',
      dataList: [
        {
          label: '详情',
          width: 60,
          callback: async (a, b) => {
            console.log('点击操作', a, b)
          },
        },
        {
          label: '详情',
          width: 60,
          callback: async (a, b) => {
            console.log('点击操作', a, b)
          },
        },
      ],
    },
    titleOperation: [
      {
        label: '左侧按钮',
        width: 60,
        callback: async (a, b) => {
          console.log('左侧按钮', a, b)
        },
      },
      {
        label: '右侧按钮',
        width: 60,
        position: 'right',
        callback: async (a, b) => {
          console.log('右侧按钮', a, b)
        },
      },
    ],
    callback: async (a, b) => {
      console.log(a, b)
      const list = Array.from({ length: 30 }).map((item, index) => ({
        id: index,
        name: `Test${index}`,
        role: `Test${index}`,
        sex: `Test${index}`,
        age: index + 10,
        address: `Test${index}`,
        disable: index == 3 || false,
      }))
      return {
        resultList: list,
        checkList: list,
        total: 20,
      }
    },
    clickRowCallback: async (a, b) => {
      console.log(a, b)
    },
    options: {},
  })
  const basicForm = ref({
    col: 4,
    labelWidth: 70, // 文本宽度
    form: {
      moreSearch: '',
      clueSourceList: [],
      labelIds: [],
    },
    fieldDataList: [
      {
        type: 'input', // form表单类型
        label: '搜索', // 字段描述信息
        placeholder: '姓名/手机号/微信/QQ/学员ID',
        field: 'moreSearch', // form 对应字段
      },
      {
        type: 'select', // form表单类型
        label: '标签', // 字段描述信息
        options: { multiple: true, maxCollapseTags: 1 },
        field: 'labelIds', // form 对应字段
        dataList: [
          { label: '标签1', value: '1' },
          { label: '标签2', value: '2' },
          { label: '标签3', value: '3' },
          { label: '标签4', value: '4' },
        ],
      },
    ],
  })
  const seniorForm = ref({
    labelWidth: 80, // 文本宽度
    col: 12,
    form: {
      connectionStatus: null,
      examYear: [],
      onlineSourceNew: [],
      studentLevel: null, // 线索等级
      intentionLevel: null, // 意向程度
      sex: null, // 性别
      sourceChannel: null, // 渠道来源
      lockFlag: null, // 锁定
      processStage: null, // 跟进阶段
      connectionCount: '', // 跟进次数
      lastFollowTime: [], // 最后跟进时间   // lastStartTime  lastEndTime
      nextTime: [], // 下次联系时间   //nextStartTime   nextEndTime
      groupId: null, // 线索分组
      allocTime: [], // 分配时间    //allocStartTime allocEndTime
      allocUserId: null, // 分配人
      studentType: null, // 线索类型
      enterYear: null, // 入学年份
      nowSchoolId: null, // 就读院校
      nowCollageId: null, // 就读院系
      nowMajorId: null, // 就读专业
      nowClassId: null, // 班级
      workStatus: null, // 就业状态
      provinceCity: null, // 所在地
      agentId: null, // 代理人
      createType: null, // 录入方式
      createUserId: null,
      overdue: '',
      createTime: [], // 录入时间 //createStudentStart  createStudentEnd
      intentionLevelList: [], // 意向程度
      allocUserIdList: [],
      examYearList: [],
      phoneBelongList: [],
      headSearch: null as any,
      headTime: [] as string[],
    },
    fieldDataList: [
      {
        width: 8,
        type: 'select', // form表单类型
        label: '考试年份', // 字段描述信息
        field: 'examYearList', // form 对应字段
        dataList: [{ label: '2021', value: 2021 }],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '意向程度', // 字段描述信息
        field: 'intentionLevelList', // form 对应字段
        dataList: [],
        options: { mode: 'multiple', maxTagCount: 1 },
      },
      {
        labelWidth:120,
        width: 8,
        type: 'cascader', // form表单类型
        label: '手机号归属地', // 字段描述信息
        options: { fieldNames: { label: 'name', value: 'name' } },
        field: 'phoneProvince', // form 对应字段
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '线索等级', // 字段描述信息
        field: 'studentLevel', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '入学年份', // 字段描述信息
        field: 'enterYear', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '性别', // 字段描述信息
        field: 'sex', // form 对应字段
        dataList: [
          { label: '男', value: '1' },
          { label: '女', value: '2' },
        ],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '来源渠道', // 字段描述信息
        field: 'sourceChannel', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '是否锁定', // 字段描述信息
        field: 'lockFlag', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '跟进阶段', // 字段描述信息
        field: 'processStage', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'input', // form表单类型
        label: '跟进次数', // 字段描述信息
        field: 'connectionCount', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '跟进状态', // 字段描述信息
        field: 'connectionStatus', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '线索类型', // 字段描述信息
        field: 'studentType', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '分配人', // 字段描述信息
        field: 'allocUserIdList', // form 对应字段
        dataList: [],
        options: { mode: 'multiple', maxTagCount: 1 },
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '代理人', // 字段描述信息
        field: 'agentId', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '就业状态', // 字段描述信息
        field: 'workStatus', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'cascader', // form表单类型
        label: '所在地', // 字段描述信息
        field: 'provinceCity', // form 对应字段
        options: { fieldNames: { label: 'name', value: 'name' } },
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '就读院校 ', // 字段描述信息
        field: 'nowSchoolId', // form 对应字段
        callback: async function (data: any) {},
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '就读院系 ', // 字段描述信息
        field: 'nowCollageId', // form 对应字段
        callback: async function (data: any) {},
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '就读专业 ', // 字段描述信息
        field: 'nowMajorId', // form 对应字段
        callback: async function (data: any) {},
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '班级 ', // 字段描述信息
        field: 'nowClassId', // form 对应字段
      },
      {
        width: 8,
        labelWidth:120,
        type: 'rangePicker', // form表单类型
        label: '最后跟进时间', // 字段描述信息
        field: 'lastFollowTime', // form 对应字段
        options: { showTime: false, valueFormat: 'YYYY-MM-DD' },
      },
      {
        width: 8,
        type: 'rangePicker', // form表单类型
        label: '分配时间 ', // 字段描述信息
        field: 'allocTime', // form 对应字段
        options: { showTime: false, valueFormat: 'YYYY-MM-DD' },
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '录入方式', // 字段描述信息
        field: 'createType', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '录入人', // 字段描述信息
        field: 'createUserId', // form 对应字段
        dataList: [],
      },
      {
        width: 8,
        type: 'rangePicker', // form表单类型
        label: '录入时间 ', // 字段描述信息
        field: 'createTime', // form 对应字段
        options: { showTime: false, valueFormat: 'YYYY-MM-DD' },
      },
      {
        width: 8,
        labelWidth:120,
        type: 'rangePicker', // form表单类型
        label: '下次联系时间 ', // 字段描述信息
        field: 'nextTime', // form 对应字段
        options: { showTime: false, valueFormat: 'YYYY-MM-DD' },
      },
      {
        width: 8,
        type: 'select', // form表单类型
        label: '数据范围', // 字段描述信息
        field: 'headSearch', // form 对应字段
        isShow: false,
        dataList: [
          { label: '有效线索总数', value: 'effectiveCount' },
          { label: '释放线索总数', value: 'releaseCount' },
          { label: '无效线索总数', value: 'invalidCount' },
          { label: '待跟进线索', value: 'needFollowCount' },
          { label: '已跟进线索', value: 'followCount' },
          { label: '校园大使总数', value: 'agentCount' },
          { label: '即将释放线索', value: 'willRelease' },
          { label: '三天未跟进线索', value: 'threeNoProcess' },
          { label: '7天未跟进线索', value: 'severNoProcess' },
          { label: '14天未跟进线索', value: 'fourteenNoProcess' },
          { label: '1月未跟进线索', value: 'oneMonthNoProcess' },
          { label: '3月未跟进线索', value: 'threeMonthNoProcess' },
          { label: '新增录入线索', value: 'newAddCount' },
          { label: '新增分配线索', value: 'newAssignCount' },
          { label: '新增校园大使推荐线索', value: 'newAddStuCount' },
        ],
      },
    ],
  })
  const seniorSearchOption = ref<SeniorSearchInterFace<any, any>>({
    onSubmit: () => console.log({ ...basicForm.value.form, ...seniorForm.value.form }),
    basicForm: basicForm.value,
    seniorForm: seniorForm.value,
  })
  const clickSeniorFun = () => {
    console.log('1111111111111111')
  }
  const searchFun = (a, b) => {
    console.log(a, b, '1111111111111111')
  }
</script>
